<template>
  <div class="risk">
    <div id="svgDiv" style="margin:0 auto;">
      <eagle-card>
        <template #desc>
          <p>
            <span><b>图例：</b></span>
          </p>
          <p class="legend">
            <span class="colorBar1"></span
            ><span class="ml-5"><b>重大风险</b></span>
          </p>
          <p class="legend">
            <span class="colorBar2"></span
            ><span class="ml-5"><b>较大风险</b></span>
          </p>
          <p class="legend">
            <span class="colorBar3"></span
            ><span class="ml-5"><b>一般风险</b></span>
          </p>
          <p class="legend">
            <span class="colorBar4"></span
            ><span class="ml-5"><b>低风险/稍有危险</b></span>
          </p>
        </template>
      </eagle-card>
      <eagle-card>
        <template #desc>
          <p class="legend">
            <span class="ml-5"
              ><b>{{ form.MapName }}-现状风险四色图</b></span
            >
          </p>
          <div
            id="svgDiv1"
            style="zoom: 70%;overflow: auto;"
            class="mt-10"
            v-html="form.content"
          ></div>
        </template>
      </eagle-card>
      <hr style="border:1px dashed #ddd;" />
      <eagle-card class="mb-30">
        <template #desc>
          <p class="legend">
            <span class="ml-5"
              ><b>{{ form.MapName }}-固有风险四色图</b></span
            >
          </p>
          <div
            id="svgDiv1"
            style="zoom: 70%;overflow: auto;"
            class="mt-10"
            v-html="form.content2"
          ></div>
        </template>
      </eagle-card>
    </div>
    <div
      id="floatDiv"
      style="position:absolute;display:none;border:none;padding:5px;max-width:1000px; background:rgba(255,255,255,1);"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: this.$route.query.id,
      autoSize: true,
      border: false,
      form: {},
      show: false,
      activeNames: ["1"],
      ReceiverUserName: "",
      content: "",
    };
  },
  created() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      let _this = this;
      let params = { id: _this.id };
      _this.$axios
      .get("/RiskMapLevel/GetDetail",{params:params})
      .then((res) => {
        var data = res.data;

        data.content = "";
        data.content2 = "";
        data.content = unescape(data.MapContent);
        data.content2 = unescape(data.MapContent2);
        //console.log(content);
        _this.form = data;
        //document.write(data.content);
      });
    },
  },
};
</script>

<style>
.risk {
  background-color: #e8f1f8;
}
.colorBar1 {
  background-color: #ff0000;
  padding-left: 20px;
}
.colorBar2 {
  background-color: #ffc000;
  padding-left: 20px;
}
.colorBar3 {
  background-color: #ffff00;
  padding-left: 20px;
}
.colorBar4 {
  background-color: #00b0f0;
  padding-left: 20px;
}

.toolBanner .colorBar5 {
  background-color: #00b0f0;
  padding-left: 20px;
}
.legend {
  text-align: left;
  margin-top: 10px;
}
</style>
